/** * @description: 辅导员工作进度 */
<template>
  <div class="pub-container">
    <div class="floor">
      <h6 class="title">辅导员工作进度</h6>
      <div class="content">
        <div class="content-top">
          <label>心</label>
          <span>心理预警</span>
        </div>
        <div class="content-bottom">
          <div>
            <span>14</span>
            <label>已处理</label>
          </div>
          <div>
            <span>14</span>
            <label>未处理</label>
          </div>
          <div>
            <span>14<i>%</i></span>
            <label>处理率</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CounsellorRate',
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  .title {
    @include fcb();
    font-size: $fz16;
    color: $color-title;

    span {
      font-size: 32px;
      font-weight: bold;
      color: $color-title;
    }
  }
}
.content {
  margin-top: 24.5px;
  &-top {
    @include fh();
    label {
      @include fcc();
      width: 24px;
      height: 24px;
      margin-right: 12px;
      font-size: $fz12;
      background: #2e6cf6;
      border-radius: 50%;
      color: #fff;
    }
    span {
      font-size: $fz16;
      color: $color-title;
    }
  }

  &-bottom {
    @include fca();
    > div {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 20px;
      width: 33.3%;
      label {
        font-size: $fz12;
        color: #97979f;
        margin-top: 5px;
      }
      span {
        font-size: 20px;
        i {
          font-size: $fz12;
        }
      }
    }
    > div + div {
      border-left: 1px solid #eff2f7;
    }
  }
}
.content + .content {
  border-top: 1px solid #e7eaf0;
  padding-top: 20px;
}
</style>
